<template>
  <div class="page">
    <div class="selectData search">
      <span style="font-size:14px;margin-right: 6px;">季度:</span>
      <el-select
        class="userIntSize"
        v-model="quarter"
        size="small"
        clearable
        placeholder="请选择季度"
        @change="getUpdate()"
      >
        <el-option v-for="item in quarterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <span style="margin-left:20px;margin-right:6px;font-size:14px;">重点工作:</span>
      <el-cascader
        ref="taskRef"
        class="userIntSize"
        v-model="taskId"
        :options="taskLists"
        :props="taskProp"
        size="small"
        :show-all-levels="false"
        @change="getTaskId"
      ></el-cascader>
    </div>
    <div id="YmyTow"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskId: '',
      quarter: 1,
      taskProp: {
        label: "name",
        value: "id",
        children: "children",
      },
      taskLists: [],
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" },
      ],
    };
  },
  mounted() {
    this.getTaskList();
    // this.getNumber();
  },
  methods: {
    // 获取数据
    getNumber() {
      this.$axios
        .post(`/deptScore/getScoreByDeptTypeAndTaskId`, {
          taskId: this.taskId,
          quarter: this.quarter,
          deptType: 2,
        })
        .then((res) => {
          if (res.code == 200) {
            let _data = res.data;
            console.log(_data, 9999);
            if (_data.length != 0) {
              let xName = [];
              let Ydata = [];
              _data.forEach((item, index) => {
                xName.push(item.deptName);
                Ydata.push(+item.score);
              });
              console.log(xName, Ydata, 999999);
              this.dataAnalysis(xName, Ydata);
            } else {
              let xName = [];
              let Ydata = [];
              this.dataAnalysis(xName, Ydata);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });

      return;
    },
    getUpdate() {
      this.getNumber();
      console.log("1");
    },
    // 时刻获取十项重点工作
    getTaskId(val) {
      if (val) {
        this.taskId = this.$refs["taskRef"].getCheckedNodes()[0].value;
        let _val = val;
        console.log(_val);
        if (!Array.isArray(_val)) {
          _val = [_val];
        }
        this.taskId = _val[_val.length - 1];
        this.getNumber();
      }
    },
    // 获取十项重点工作
    getTaskList() {
      this.$axios
        .post("/task/getList")
        .then((res) => {
          res.data.map((item) => {
            if (item.children.length == 0) {
              item.children = undefined;
            }
            this.taskLists = res.data;
          });
            this.taskId = res.data[0].id
            this.getNumber();
        })
        .catch((err) => {});
    },
    // 各区县得分排名分析展示
    dataAnalysis(xName, Ydata) {
      var YmyThree3 = this.$echarts.init(document.getElementById("YmyTow"));
      var dataAxis = xName;
      var data = Ydata;
      YmyThree3.setOption({
        grid: {
          left: "10%",
          bottom: "35%",
        },
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          }
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 2; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
          },
        },
        yAxis: {
          type: "value",
          min: 80,
          max: 100,
        },
        series: [
          {
            data: data,
            type: "bar",
            // showBackground: true,
            barWidth: 20,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            itemStyle: {
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    "#c52b6a",
                    "#ec4290",
                    "#ea3acf",
                    "#d539f7",
                    "#a82ada",
                    "#8114c0",
                    "#d8bd26",
                    "#b8ca23",
                    "#76a905",
                    "#80c13d",
                    "#4da758",
                    "#4aa4a5",
                    "#2a65b1",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  > #YmyTow {
    width: 100%;
    height: 440px;
  }
  > .search {
    width: 100%;
    height: 40px;
  }
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
